<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        width: 192px;
        height: 128px;
        margin: 0px;
        padding: 0px;
        min-width: 0px;
    }

    .nut-tabs__titles-item__line {
        content: " ";
        height: 3px;
        background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, .15) 100%));
    }
</style>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<body>
    <div id="main" style="height: 100%;width: 100%;color: white;position: relative;">


        <div style="width: 100%;height: 100%;position: absolute;background-image: url('images/back.jpg'); background-size: cover; background-position: center;">

        </div>
        <div style="background: #333333;width: 100%;height: 100%;position: absolute;opacity: 0.6">

        </div>
        <div v-if="examStuScore">
            <div v-if="examStuScore.type==2"
                 style="width: 100%;height: 100%;position: absolute;display: flex;flex-direction: column;padding: 8px;box-sizing: border-box">
                <div style="flex-grow: 1;display: flex;">
                    <div style="font-size: 20px;font-weight: bold;white-space: nowrap;max-width: 50%">{{examStuScore.zb}}组{{examStuScore.xh}}号</div>
                    <div style="flex: 1"></div>
                    <div style="font-size: 20px;font-weight: bold;white-space: nowrap;max-width: 50%">{{examStuScore.stuName}}</div>
                </div>

                <div v-if="showMode==1" style="flex-grow: 2;display: flex;flex-direction: column">
                    <div style="flex-grow: 1;display: flex;align-items: center;flex-direction: column">
                        <div style="font-size: 24px;font-weight: bold;">第{{examStuScore.count}}次</div>
                        <div style="font-size: 32px;font-weight: bold;overflow: hidden;flex-grow: 1;text-align: center">
                            {{getNowScore() + examStuScore.dw}}
                        </div>
                    </div>
                </div>
                <div v-if="showMode==2" style="flex-grow: 2;display: flex;flex-direction: column">
                    <div style="flex: 1;display: flex;align-items: center">
                        <div style="font-size: 24px;font-weight: bold;">最高：</div>

                        <div style="font-size: 28px;font-weight: bold;overflow: hidden;flex: 1;width: 0px;text-align: end;white-space: nowrap">
                            {{examStuScore.cj + examStuScore.dw}}
                        </div>
                    </div>
                    <div style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
                        <div style="display: flex;flex-direction: column;flex-grow: 1;overflow: hidden;width: 0px">
                            <div v-if="examStuScore.cj1" style="flex: 1;text-align: center;font-weight: bold;white-space: nowrap">
                                {{examStuScore.cj1 + examStuScore.dw}}
                            </div>
                            <div v-if="examStuScore.count==1" class="nut-tabs__titles-item__line"></div>
                        </div>
                        <div style="display: flex;flex-direction: column;flex-grow: 1;overflow: hidden;width: 0px">
                            <div v-if="examStuScore.cj2" style="flex: 1;text-align: center;font-weight: bold;white-space: nowrap">
                                {{examStuScore.cj2 + examStuScore.dw}}
                            </div>
                            <div v-if="examStuScore.count==2" class="nut-tabs__titles-item__line"></div>
                        </div>
                        <div style="display: flex;flex-direction: column;flex-grow: 1;overflow: hidden;width: 0px">
                            <div v-if="examStuScore.cj3" style="flex: 1;text-align: center;font-weight: bold;white-space: nowrap">
                                {{examStuScore.cj3 + examStuScore.dw}}
                            </div>
                            <div v-if="examStuScore.count==3" class="nut-tabs__titles-item__line"></div>
                        </div>

                    </div>
                </div>

            </div>

            <div v-if="examStuScore.type==1"
                 style="width: 100%;height: 100%;position: absolute;display: flex;flex-direction: column;padding: 8px;box-sizing: border-box">
                <div style="flex-grow: 1;display: flex;">
                    <div style="font-size: 24px;font-weight: bold;">{{examStuScore.zb}}组{{examStuScore.xh}}号</div>
                    <div style="flex: 1"></div>
                    <div style="font-size: 24px;font-weight: bold;">{{examStuScore.stuName}}</div>
                </div>

                <div style="flex-grow: 2;display: flex;flex-direction: column">
                    <div style="flex-grow: 1;display: flex;align-items: center;flex-direction: column">
                        <div style="font-size: 24px;font-weight: bold;">第{{examStuScore.count}}次</div>
                        <div style="font-size: 36px;font-weight: bold;overflow: hidden;flex-grow: 1;text-align: center">
                            请准备
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="examStuScore.type==3"
                 style="width: 100%;height: 100%;position: absolute;display: flex;padding: 8px;box-sizing: border-box">
                <div style="margin:8px;background:red;flex:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:32px">
                    {{examStuScore.text}}
                </div>

            </div>

            <!--开始倒计时-->
            <div v-if="examStuScore.type==4"
                 style="width: 100%;height: 100%;position: absolute;display: flex;padding: 8px;box-sizing: border-box">
                <div style="margin:8px;background:white;flex:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:46px;color:black">
                    {{examStuScore.text == 0?"开始":examStuScore.text}}
                </div>

            </div>
        </div>

        <div v-else style="width: 100%;height: 100%;position: absolute;display: flex;flex-direction: column;align-items: center;justify-content: center">
            <div style="font-size: 24px;font-weight: bold;color: white">等待考试</div>
        </div>
    </div>
</body>
<script type="text/javascript">

    let show = new Vue({
        el: "#main",
        data: {
            text: "测试vue",
            examStuScore: null,
            showMode: 1,
            clearTimer: null,
            changeModeTimer: null,
            field: null,
            connect: false,
            heartCheck: {
                timeout: 15000,//20min
                timeoutObj: null,
                reset: function () {
                    clearTimeout(this.timeoutObj);
                    this.start();
                },
                start: function () {
                    this.timeoutObj = setTimeout(function () {
                        // websocket.send("heart");
                    }, this.timeout)
                }
            }
        },
        mounted: function () {
            let that = this;
            console.log("mounted");
            const searchParams = new URLSearchParams(window.location.search);
            // 迭代查询参数
            for (let p of searchParams) {
                console.log(p);
            }
            console.log(searchParams.get('id'))
            this.field = searchParams.get('id');
            this.createSocket();
            // setTimeout(() => {
            //     that.newSore(
            //         {
            //             stuName: "测试",
            //             zb: 5,
            //             xh: 2,
            //             count: 2,
            //             cj1: "1.23",
            //             cj2: "1.26",
            //             cj3: "11.24",
            //             cj: "1.26",
            //             dw: "米"
            //         }
            //     );
            // }, 1000)
        },
        methods: {
            newSore(examStuScore) {
                if (this.examStuScore != null && examStuScore.type == 1) {
                    return;
                }
                this.showMode = 1;
                this.examStuScore = examStuScore;
                let that = this;
                clearTimeout(this.clearTimer)
                clearTimeout(this.changeModeTimer)
                this.changeModeTimer = setTimeout(() => {
                    that.showMode = 2;
                }, 3000)
                if (examStuScore.type == 3) {
                    this.clearTimer = setTimeout(() => {
                        that.examStuScore = null;
                    }, 1000)
                } else {
                    this.clearTimer = setTimeout(() => {
                        that.examStuScore = null;
                    }, 10000)
                }

            },
            getNowScore() {
                if (this.examStuScore.count == 1) {
                    return this.examStuScore.cj1;
                }
                if (this.examStuScore.count == 2) {
                    return this.examStuScore.cj2;
                }
                if (this.examStuScore.count == 3) {
                    return this.examStuScore.cj3;
                }
            },
            createSocket() {
                let websocket = null;
                let that = this;
                /* 获取主机地址和端口号 */
                const url = window.location.host;
                //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    websocket = new WebSocket("ws://" + url + "/ws?id=" + this.field);
                } else {
                    console.error("当前游览器不支持webSocket!");
                }
                websocket.onerror = function () {
                    console.error("连接错误!");
                    that.connect = false;
                    that.reconnect();
                };
                //连接关闭
                websocket.onclose = function () {
                    that.reconnect();
                    that.connect = false;
                };
                //连接成功
                websocket.onopen = function () {
                    that.heartCheck.start();
                    that.connect = true;
                }
                //收到数据
                websocket.onmessage = function (event) {
                    let obj = JSON.parse(event.data);
                    that.heartCheck.reset();      //拿到任何消息都说明当前连接是正常的
                    console.info(obj)
                    that.newSore(obj);
                }
            },
            reconnect() {
                if (this.reconnect.lockReconnect) return;
                this.reconnect.lockReconnect = true;
                let that = this;
                setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
                    show.createSocket();
                    that.reconnect.lockReconnect = false;
                }, 3000);
            },


        },
    })
</script>
</html>
